import React from 'react';
import { Form, Input, Button, Alert, Divider } from 'antd';
import { routerRedux } from 'dva/router';
import styles from './style.less';
import TableForm from '../TableForm';


export default ({ formItemLayout, form, data, dispatch, submitting }) => {
  const { getFieldDecorator, validateFields } = form;
  const onPrev = () => {
    dispatch(routerRedux.push('/exam/add'));
  };
  const onValidateForm = (e) => {
    e.preventDefault();
    validateFields((err, values) => {
      console.log(err);
      if (!err) {
        values['room_ids'] = 1;
        dispatch({
          type: 'exam/submitStepForm',
          payload: {
            ...data,
            ...values,
          },
        });
      }
    });
  };
  return (
    <Form layout="horizontal" className={styles.stepForm} style={{maxWidth: '750px'}}>
      <Alert
        closable
        showIcon
        message="考场设置人数不能小于考试安排总人数。"
        style={{ marginBottom: 24 }}
      />

      {getFieldDecorator('room_ids', {
        initialValue: [],
      })(<TableForm />)}

      <Form.Item
        style={{ marginBottom: 8, textAlign: 'center' }}
        wrapperCol={{
          xs: { span: 24, offset: 0 },
          sm: { span: 24, offset: 0 },
        }}
        label=""
      >
        <Button type="primary" onClick={onValidateForm} loading={submitting}>
          提交
        </Button>
        <Button onClick={onPrev} style={{ marginLeft: 8 }}>
          上一步
        </Button>
      </Form.Item>
    </Form>
  );
};
